<template>
  <div class="carousel">
    <div class="carousel-inner">
      <div
          v-for="(img, index) in images"
          :key="index"
          class="carousel-item"
          :class="{ active: index === currentIndex }"
      >
        <img :src="img" alt="" />
      </div>
    </div>
    <button class="carousel-control prev" @click="prev">&#10094;</button>
    <button class="carousel-control next" @click="next">&#10095;</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import img1 from '../assets/img/1.jpg'
import img2 from '../assets/img/2.jpg'
import img3 from '../assets/img/3.jpg'
import img4 from '../assets/img/4.jpg'
import img5 from '../assets/img/5.jpg'

const images = [img1, img2, img3, img4, img5]
const currentIndex = ref(0)

const next = () => {
  currentIndex.value = (currentIndex.value + 1) % images.length
}

const prev = () => {
  currentIndex.value = (currentIndex.value - 1 + images.length) % images.length
}
</script>

<style scoped>
.carousel {
  position: relative;
  width: 60%;
  height: 400px;
  overflow: hidden;
  margin: 0 auto;

}

.carousel-inner {
  position: relative;
  height: 100%;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-item.active {
  opacity: 1;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  padding: 10px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  outline: none;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}
</style>